<script setup>
  import { ref, reactive } from 'vue'
  // <!-- 1任务通知 -->
  import slNotify from './components/notify'
  // <!-- 2.公告 -->
  import slAnnounce from './components/announce'

  // Tab 标签页索引
  const tabIndex = ref(0)
  const tabMetas = reactive([{
      title: '任务通知',
      rendered: true,
    },
    {
      title: '公告',
      rendered: false,
    },
  ])
  // 切换标签页
  function onTabChange(index) {
    tabMetas[index].rendered = true
    tabIndex.value = index
  }
</script>

<template>
  <view class="page-container">
    <view class="message-tabbar">
      <text v-for="(tabMeta, index) in tabMetas" :key="tabMeta.title" @click="onTabChange(index)"
        :class="{ active: tabIndex === index }" class="tab">{{ tabMeta.title }}</text>
    </view>
    <!-- 
     tab切换:
         v-show  可以实现 ,有问题,列表会被默认加载
         v-if   也可以实现,但是没有缓存=>通过元素新增或删除
         
         解决:
         同时使用 v-if 和 v-show  结合控制隐藏
         'v-if有惰性,优先级高, 只有true 元素才会被显示和隐藏,
         
         
         第一次: 任务通知页会被执行
         第二次:公告组件的v-if 变为true, 会被创建执行
     -->

    <!-- 1任务通知 -->
    <view class="message-list" v-show="tabIndex === 0" v-if="tabMetas[0].rendered">
      <sl-notify></sl-notify>
    </view>
    <!-- 2.公告 -->
    <view class="message-list" v-show="tabIndex === 1" v-if="tabMetas[1].rendered">
      <sl-announce></sl-announce>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>